<template>
  <div class="flex flex-wrap w-[60px] justify-between">
    <ElUpload
        accept="image/*"
        :show-file-list="false"
        :before-upload="beforeUpload"
        action="#"
    >
      <Upload
          :class="iconClass"
          v-tippy="{ content:  '上传', placement: 'left-start'
          }"
      />
    </ElUpload>
    <DownloadIcon
        :class="iconClass"
        @click="downloadFile"
        v-tippy="{
        content:
    '下载',
    placement: 'right-start'
    }"
    />
    <ChangeIcon
        :class="iconClass"
        @click="cropToggle"
        v-tippy="{
        content:
    '圆形、矩形裁剪',
    placement: 'left-start'
    }"
    />
    <Reload
        :class="iconClass"
        @click="handCropper('reset')"
        v-tippy="{
        content:
    '重置',
    placement: 'right-start'
    }"
    />
    <ArrowUp
        :class="iconClass"
        v-longpress:0:100="()=>{handCropper('move', [0, -10])}"
        v-tippy="{
        content:
    '上移(可长按)',
    placement: 'left-start'
    }"
    />
    <ArrowDown
        :class="iconClass"
        v-longpress:0:100="()=>{handCropper('move', [0, 10])}"
        v-tippy="{
        content:
    '下移(可长按)',
    placement: 'right-start'
    }"
    />
    <ArrowLeft
        :class="iconClass"
        v-longpress:0:100="()=>{handCropper('move', [-10, 0])}"
        v-tippy="{
        content:
    '左移(可长按)',
    placement: 'left-start'
    }"
    />
    <ArrowRight
        :class="iconClass"
        v-longpress:0:100="()=>{handCropper('move', [10, 0])}"
        v-tippy="{
        content:
    '右移(可长按)',
    placement: 'right-start'
    }"
    />
    <ArrowH
        :class="iconClass"
        @click="handCropper('scaleX', -1)"
        v-tippy="{
            content:
        '水平翻转',
        placement: 'left-start'
        }"
    />
    <ArrowV
        @click="handCropper('scaleY', -1)"
        :class="iconClass"
        v-tippy="{
            content:
        '垂直翻转',
        placement: 'right-start'
        }"
    />
    <RotateLeft
        :class="iconClass"
        @click="handCropper('rotate', -45)"
        v-tippy="{
            content:
        '逆时针旋转',
        placement: 'left-start'
        }"
    />
    <RotateRight
        @click="handCropper('rotate', 45)"
        :class="iconClass"
        v-tippy="{
            content:
        '顺时针旋转',
        placement: 'right-start'
        }"
    />
    <SearchPlus
        v-longpress:0:100="()=>{handCropper('zoom', 0.1)}"
        :class="iconClass"
        v-tippy="{
            content:
        '放大(可长按)',
        placement: 'left-start'
        }"
    />
    <SearchMinus
        v-longpress:0:100="()=>{handCropper('zoom', -0.1)}"
        :class="iconClass"
        v-tippy="{
            content:
        '缩小(可长按)',
        placement: 'right-start'
        }"
    />
  </div>
</template>

<script setup>
import {
  Reload,
  Upload,
  ArrowH,
  ArrowV,
  ArrowUp,
  ArrowDown,
  ArrowLeft,
  ChangeIcon,
  ArrowRight,
  RotateLeft,
  SearchPlus,
  RotateRight,
  SearchMinus,
  DownloadIcon
} from "./svg";
import {directive as VTippy} from 'vue-tippy'
import VLongpress from '@/directive/VLongpress.js'
import {computed} from 'vue'
import {ElUpload} from "element-plus";

const iconClass = computed(() => {
  return [
    "p-[6px]",
    "h-[30px]",
    "w-[30px]",
    "outline-none",
    "rounded-[4px]",
    "cursor-pointer",
    "box-border",
    "hover:bg-[rgba(0,0,0,0.06)]"
  ];
});
const props = defineProps({
  beforeUpload: {
    type: Function
  },
  downloadFile: {
    type: Function
  },
  handCropper: {
    type: Function
  },
  cropToggle: {
    type: Function
  }

})

</script>


<style scoped lang="scss">

</style>